<template>
  <div>
    <el-table-form ref="form" class="form" :model="query">
      <el-form-item label="所属机构:" prop="orgSNNo">
        <el-tree-select
          ref="treeSelect"
          v-model="query.orgSNNo"
          :clearable="true"
          class="tree-select"
          :popover-width="360"
          :select-params="{
            clearable: true,
            placeholder: '请选择',
            loading: $loadingPlugin.getTreeData
          }"
          :tree-params=" {
            filterable:true,
            'expand-on-click-node': false,
            'highlight-current': true,
            'filterable': true,
            props:{
              value:'orgSNNo',
              label: 'orgName',
              disabled: 'disabled',
            },
            data: treeData
          }"
          @node-click="selectTreeChange"
          @search-clear="searchClear"
        />
      </el-form-item>
      <el-form-item label="期初日期:" class="merge-item">
        <el-date-picker
          v-model="query.startDt"
          clearable
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>

      <template v-slot:btns>
        <el-button v-permission="1" type="primary" icon="el-icon-search" @click="search">查询</el-button>
      </template>
    </el-table-form>
    <div style="margin-bottom: 10px;" class="btn-group">
      <div>
        <el-button v-permission="2" type="primary" icon="el-icon-plus" @click="add">新增</el-button>
        <!-- <el-button type="primary" icon="" :loading="$loadingPlugin.openSetting" @click="openSetting">资金科目匹配</el-button> -->
      </div>
    </div>
    <lb-table
      ref="lbTable"
      v-el-height-adaptive-table="{bottomOffset:10}"
      v-loading="$loadingPlugin.fetchData"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="tableData.column"
      :data="tableData.data"
      pagination
      :total="tableData.total"
      custom-column
      @fetch="fetchData"
    />

    <add ref="add" :tree-data="treeData" :org-list="orgList" @refresh="refresh" />
    <!-- <match ref="match" @refresh="refresh" /> -->
  </div>
</template>

<script>
  import { initialaccountList, initialaccountDelete } from '@/api'
  import getTreeData from '@/utils/jsonTree'
  import { mapGetters } from 'vuex'
  import { parseTime } from '@/utils'
  export default {
    name: 'CapitalSubject',
    components: {
      add: require('./components/add.vue').default
      // match: require('./components/match.vue').default
    },
    data() {
      return {
        query: {
          orgSNNo: '',
          startDt: ''
        },
        tableData: {
          total: 0,
          column: [
            { type: 'index' },
            { label: '门店', prop: 'orgName', width: 300, align: 'center' },
            { label: '期初日期', prop: 'startDt', width: '', align: 'center',
              render: (h, { row }) => <span>{ row.startDt && parseTime(row.startDt, '{y}-{m}-{d}') }</span>
            },
            { label: '现金期初数', prop: 'cashAmount', width: '', align: 'right',
              render: (h, { row }) => <span>{ row.cashAmount && row.cashAmount.toFixed(2) }</span>
            },
            { label: '月结期初数', prop: 'monthlyAmount', width: '', align: 'right',
              render: (h, { row }) => <span>{ row.monthlyAmount && row.monthlyAmount.toFixed(2) }</span>
            },

            {
              label: '操作',
              align: 'left',
              fixed: 'right',
              width: 85,
              render: (h, { row, $index }) => {
                return (
                  <div>
                    <el-link underline={false} v-permission='3' size='mini' onClick={() => this.editRow(row, $index)}>
                     编辑
                    </el-link>
                    <el-link underline={false} v-permission='4' type='danger' size='mini' onClick={() => this.delRow(row, $index)}>
                     删除
                    </el-link>
                  </div>
                )
              }
            }
          ],
          data: []
        }
      }
    },
    computed: {
      ...mapGetters([
        'orgList'
      ])
    },
    async created() {
      await this.getTreeData()
    },
    methods: {
      // 获取所属机构数据
      async getTreeData() {
        const data = this.orgList.map(item => ({
          label: item.orgName,
          ...item
        }))
        this.treeData = getTreeData(data)
      },
      // 选择所属机构
      selectTreeChange(value) {
        this.orgSNNo = value.orgSNNo
      },
      async fetchData({ currentPage = 1, pageSize = 20 }) {
        const params = {
          ...this.query,
          currentPage,
          pageSize
        }
        if (!this.query.orgSNNo) {
          delete params.orgSNNo
        }
        if (!this.query.startDt) {
          delete params.startDt
        }
        const res = await initialaccountList(params)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
        // this.flexColumnWidth()
      },
      editRow(row) {
        this.$refs.add.open(row)
      },
      async delRow(row) {
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          console.log(row.startDt)
          const params = {
            orgId: row.orgId,
            // startDt: new Date(row.startDt).toISOString()
            startDt: parseTime(row.startDt, '{y}-{m}-{d} {h}:{i}:{m}')
          }
          const res = await initialaccountDelete(params)
          if (res.success) {
            this.refresh()
          }
        })
      },
      add() {
        this.$refs.add.open()
      },
      openSetting() {
        this.$refs.match.open()
      },
      refresh() {
        this.fetchData({})
      },
      searchClear() {
        if (this.$refs.treeSelect) this.$refs.treeSelect.keywords = ''
      },
      search() {
        this.$refs.lbTable.fetch({ currentPage: 1 })
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>

